<template>
  <div id="BannerTable"
     v-loading="tabConfigAndData.tableLoading"
     :element-loading-text="tabConfigAndData.tableLoadingTxt || '加载中'"
     element-loading-background="rgba(255, 255, 255, 0.8)"
  >
    <el-table
      :data="tabConfigAndData.tableData" border style="width: 100%"
      :empty-text="tabConfigAndData.emptyTxt || '暂无数据'"
    >
      <el-table-column
        label="图片">
        <template slot-scope="scope">
          <img
            class="banner_pic"
            width="284px" height="146px" alt=""
            :src="`${scope.row.itemBg}?imageView2/1/w/284/h/146`"
            @click.stop="showBigPic(scope.row.itemBg)"
          >
        </template>
      </el-table-column>
      <el-table-column
        label="类型">
        <template slot-scope="scope">
          {{ scope.row | handleBannerType }}
        </template>
      </el-table-column>
      <el-table-column
        label="商品ID / 活动ID / 超链接">
        <template slot-scope="scope">
          <a v-if="scope.row.itemUrl" :href="scope.row.itemUrl | handleOutLink" target="_blank">{{scope.row.itemUrl}}</a>
          <span v-else>{{ scope.row.itemDesc || scope.row.itemId }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="priority"
        label="优先级">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            type="text" size="small"
            @click="$emit('editOneBannerClick', scope.row.id, scope.$index)"
          >
            编辑
          </el-button>
          <el-button
            type="text" size="small"
            style="color: #dd6161"
            @click="$emit('deleteOneBannerClick', scope.row.id, scope.$index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="add_row_btn_block">
      <el-button type="primary" @click="$emit('addOneBannerClick')">新增一条</el-button>
    </div>

    <el-dialog
      :visible.sync="bigPicDialogVis"
    >
      <img width="100%" :src="currentPic" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BannerTable',
  props: [
    'tabConfigAndData'
  ],
  data () {
    return {
      bigPicDialogVis: false,
      currentPic: ''
    }
  },
  filters: {
    handleBannerType: (row) => {
      if (row.itemDesc) {
        return '活动'
      }
      if (row.itemId) {
        return '商品'
      }
      if (row.itemUrl) {
        return '外链'
      }
      return ''
    },
    handleOutLink: (link) => { // 优化外链能正常跳转
      if (link.indexOf('http') === -1) {
        return `http://${link}`
      }
      return link
    }
  },
  methods: {
    showBigPic (picUrl) {
      this.currentPic = picUrl
      window.setTimeout(() => { this.bigPicDialogVis = true }, 200)
    }
  }
}
</script>

<style scoped lang="scss">
  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .add_row_btn_block {
    margin: 10px 0 10px;
    text-align: right;
  }
  .banner_pic {
    &:hover {
      cursor: pointer;
    }
  }
</style>
